<template>
  <div class="">
    <!-- 头部 -->
     <div class="w-header">
      <div class="w-xhead">
        <!-- logo -->
       <img class="c-logo" src="../../assets/user/阿拉灯.png" alt="">
       <!-- 搜索 -->
       <input class="c-ipt" type="text" >
       <img class="c-sousuo" src="../../assets/user/sousuo.png" alt="">
       <div class="c-sousuotxt">输入商品关键词</div>
       <img class="c-xinxi" src="../../assets/user/xinxi.png" alt=""> 
      </div>
    </div>
<!-- 导航 -->
 <ul class="c-me" >
            <li @click="click(index)" class="c-op" v-for="(item,index) in list" :key="item.id" >
               <div :class="{'c-bor':arr[index]}">{{item.name}}</div> 
                </li></ul>
<!-- 顶部图 -->
<div class="c-mianmo"><img src="../../assets/user/mianmotu.png" alt=""></div>
<!-- 中部图 -->
<div class="c-zhiyou">
  <div class="c-riben">
    <img class="c-rimg" src="../../assets/user/日本.png" alt="">
    <div class="c-rt">日本直邮</div>
  </div>
  <div class="c-meiguo">
    <img class="c-mimg" src="../../assets/user/美国.png" alt="">
    <div key="c-mt">美国直邮</div>
  </div>
    <div class="c-zhongguo">
    <img class="c-zimg" src="../../assets/user/中国.png" alt="">
    <div class="c-ct">中国直邮</div>
  </div>
 <div class="c-aodaliya">
    <img class="c-aimg" src="../../assets/user/澳大利亚.png" alt="">
   <div class="c-at">澳大利亚直邮</div>
  </div>

<div class="c-yingguo">
    <img class="c-yimg" src="../../assets/user/英国.png" alt="">
   <div class="c-yt">英国直邮</div>
  </div>
</div>
<!-- 分割线 -->
<div class="c-fg"></div>
<!-- 热卖品类 -->
<div class="c-remai">
<div class="c-rmpl" >热卖品类</div>

<img class="c-tz1" src="../../assets/user/套装.png" alt="">
<div class="c-tzt1" @click="facia" >洁面护理</div>

<img class="c-kh1" src="../../assets/user/口红.png" alt="">
<div class="c-kht1">人气口红</div>

<img class="c-b1" src="../../assets/user/包.png" alt="">
<div class="c-bt1">品牌包包</div>

<img class="c-tz2" src="../../assets/user/套装.png" alt="">
<div class="c-tzt2" @click="facia">洁面护理</div>

<img class="c-kh2" src="../../assets/user/口红.png" alt="">
<div class="c-kht2">人气口红</div>

<img class="c-b2" src="../../assets/user/包.png" alt="">
<div class="c-bt2">品牌包包</div>

</div>
    <!-- 底部 -->
     
     <foots></foots>
  </div>
</template>

<script>
import footer from '../../components/ma/footer';

export default {
    name:'Class',
    data() {
      return {
        list:[
                {id:1,name:'为您推荐'},
                {id:2,name:'面部护理'},
                {id:3,name:'底妆彩妆'},
                {id:4,name:'休闲零食'},
                {id:5,name:'身体护理'},
                {id:6,name:'美容美发'},
                {id:7,name:'生活用品'},
                {id:8,name:'个人护理'},
                {id:9,name:'保健养生'},
                {id:10,name:'时尚潮品'},
                {id:11,name:'母婴用品'}
            ],
            arr:[false,false,false,false,false,false,false,false,false,false,false],
      }
    },
    components:{
      'foots':footer
    },
    methods:{
    click(c){
        for(var i=0;i<this.arr.length;i++){
            this.arr[i] = false;
        }
         this.$set(this.arr,c,true);
        console.log(c);
        if(c==0){
           this.$router.replace('/class');
        }else if(c==1){
          this.$router.replace('/category');
        }
        this.$set(this.arr,c,true);
         },
         facia:function(){
           this.$router.replace('/facialcare')
         }
}
     }
     
</script>

<style  scoped>
/* 顶部 */
  .w-header{
  background-color: #e53e42;
  width: 100%;
  height: 9.6rem;
  color: #fff;
  font-size: 3.6rem;
  position: fixed;
  top: 0;
  left: 0;
}
.w-xhead{
  height:9.6rem;
  /* width:calc(100% - 4rem) ; */
  line-height:9.6rem;
}
.c-logo{
  height: 3.4rem;
  margin-left:2.3rem ;
  /* border: 1px #f00 solid; */
  vertical-align: middle;
}
.c-xinxi{
  /* display: inline-block; */
  /* width: 3.8rem; */
  height: 3.8rem;
 padding-left:6.8rem ;
 vertical-align: middle;
}

.c-ipt{
height: 4.8rem;
width: 40rem;
display:inline-block;
margin-left:6.7rem ;
font-size: 2.4rem;
vertical-align: middle;
border-radius:  1rem;
border: none;
}
.c-sousuo{
  width: 2.8rem;
  height: 3rem;
  position: fixed;
  top: 3.8rem;
  left: 24.4rem;
}
.c-sousuotxt{
  font-size: 2.4rem;
  color: #e83d41;
  position: fixed;
  top: 0.5rem;
  left: 27.6rem;
}

/* 导航 */
.c-me{
width: 18rem;
margin-top:9.6rem;
border-right: 0.1rem #cccccc solid;
}
.c-op{
    height: 8rem;
    font-size: 3rem;
    line-height: 8rem;
    text-align: center;
    color: #4d4d4d;
    border-bottom:0.1rem #cccccc solid
  
}
.c-bor{
    height: 8rem;
    line-height: 8rem;
    color: #e53e42;
    border-right:0.1rem #f00 solid ;
}
.c-mbhl{
    width: 50rem;
    height: 20rem;
    position: absolute;
    top:11.3rem;
    right: 2rem;
}
/* 顶部图 */
.c-mianmo{
  width: 50rem;
  height: 20rem;
  position: fixed;
  top: 11.2rem;
  right: 2rem;
}
/* 直邮专区 */
.c-zhiyou{
  width:50rem;
  height:32rem;
  text-align: center;
}
/* 日本 */
.c-riben{
  font-size: 2.8rem;
  width: 16rem;
  height: 16rem;
  /* border: 1px #f00 solid; */
  position: fixed;
  top: 33.6rem;
  right: 36rem;
}
.c-rimg{
  width: 5.3rem;
  height: 4.8rem;
  padding: 2.4rem  5.3rem ;
}
.c-rt{
  font-size: 2.8rem;
line-height: 2.8rem;
width: 17rem;
color: #4d4d4d;
position: fixed;
top: 44.4rem;
right: 36rem;
}
/* 美国 */
.c-meiguo{
  font-size: 2.8rem;
  width: 16rem;
  height: 16rem;
  /* border: 1px #f00 solid; */
  position: fixed;
  top: 33.6rem;
  right: 2rem;
}
.c-mimg{
  width: 4.8rem;
  height: 4.8rem;
  padding: 2.4rem  5.6rem  ;
}
.c-mt{
font-size: 2.8rem;
line-height: 2.8rem;
width: 17rem;
color: #4d4d4d;
position: fixed;
top: 44.4rem;
right: 2rem;
}
/* 中国 */
.c-zhongguo{
  font-size: 2.8rem;
  width: 16rem;
  height: 16rem;
  /* border: 1px #f00 solid; */
  position: fixed;
  top: 41.7rem;
  right: 19rem;
}
.c-zimg{
  width: 4.8rem;
  height: 4.8rem;
  padding: 2.4rem  5.6rem;
  /* border: 1px #f00 solid; */
}
.c-zt{
font-size: 2.8rem;
line-height: 2.8rem;
width: 17rem;
color: #4d4d4d;
position: fixed;
top: 52.5rem;
right: 19rem;
}
/* 澳大利亚 */
.c-aodaliya{
  width: 16rem;
  height: 16rem;
  /* border: 1px #f00 solid; */
  position: fixed;
  top: 49.7rem;
  right: 36rem
}
.c-aimg{
  width: 4.8rem;
  height: 4.8rem;
  padding: 2.4rem  5.6rem ;
  /* border: 1px #f00 solid; */
}
.c-at{
font-size: 2.8rem;
line-height: 2.8rem;
width: 17rem;
color: #4d4d4d;
position: fixed;
top: 60.4rem;
right: 35.5rem
}
/* 英国 */
.c-yingguo{
  font-size: 2.8rem;
  width: 16rem;
  height: 16rem;
  /* border: 1px #f00 solid; */
  position: fixed;
  top: 49.7rem;
  right: 2rem;
}
.c-yimg{
  width: 4.8rem;
  height: 4.8rem;
  padding: 2.4rem  5.6rem  3rem 5.6rem;
}
.c-yt{
font-size: 2.8rem;
line-height: 2.8rem;
width: 17rem;
color: #4d4d4d;
position: fixed;
top: 60.4rem;
right: 2rem
}
/* 分割 */
.c-fg{
  width: 52rem;
  border-top:0.1rem #ccc solid ;
  position: fixed;
  top: 67.5rem;
  right: 1rem
}
/* 热卖品类 */
.c-rmpl{
font-size: 2.8rem;
position: fixed;
top: 69.5rem;
right: 41.4rem
}
/* 套装 */
.c-tz1{
  width: 13.2rem;
  height: 10.4rem;
  position: fixed;
  top: 76.5rem;
  right: 37.4rem
}
.c-tzt1{
  font-size: 2.4rem;
  color: #4d4d4d;
  position: fixed;
  top: 88.6rem;     
  right: 39.1rem
}

.c-tz2{
  width: 13.2rem;
  height: 10.4rem;
  position: fixed;
  top: 94.5rem;
  right: 37.4rem
}
.c-tzt2{
  font-size: 2.4rem;
  color: #4d4d4d;
  position: fixed;
  top: 106.6rem;  
  right: 39.1rem
}
/* 口红 */
.c-kh1{
  width: 4.9rem;
  height: 10rem;
  position: fixed;
  top: 76.5rem;
  right: 24.5rem
}
.c-kht1{
  font-size: 2.4rem;
  color: #4d4d4d;
  position: fixed;
  top: 88.6rem;     
  right: 22.1rem
}

.c-kh2{
  width: 4.9rem;
  height: 10rem;
  position: fixed;
  top: 94.5rem;
  right: 24.5rem
}
.c-kht2{
  font-size: 2.4rem;
  color: #4d4d4d;
  position: fixed;
  top: 106.6rem;   
  right: 22.1rem
}
/* 包 */
.c-b1{
  width: 9.2rem;
  height: 10.3rem;
  position: fixed;
  top: 76.5rem;
  right: 5.4rem
}
.c-bt1{
  font-size: 2.4rem;
  color: #4d4d4d;
  position: fixed;
  top: 88.6rem;     
  right: 5.2rem
}

.c-b2{
  width: 9.2rem;
  height: 10.3rem;
  position: fixed;
  top: 94.5rem;
  right: 5.4rem
}
.c-bt2{
  font-size: 2.4rem;
  color: #4d4d4d;
  position: fixed;
  top: 106.6rem;     
  right: 5.2rem
}

/* 底部 */
.w-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9.6rem;
  border-top: 0.1rem #ccc solid;
  z-index: 1;
}
.w-xfoot{
  border-top: 0.1rem solid #e6e6e6;
  height: 9.6rem;
}
.w-xfoot ul{
  display: flex;
  height: 9.6rem;
}
.w-xfoot ul li{
  flex: 1;
  font-size:2rem;
  color: #666;
  text-align: center;

}
.w-xfoot ul li.w-red{
  color: #e83d41;
}
.w-xfoot ul li{
  position: relative;
  overflow: hidden;
}
.w-xfoot ul li span{
  display: inline-block;
  width: 100%;
  margin-top:-0.8rem ;
  
}
.w-xfoot ul li i{
  margin-top: 1.2rem;
  display: inline-block;
  height: 5rem;
  width: 5rem;
  /* outline: 0.1rem solid #00f; */

}
.w-xfoot ul li:nth-child(1) i{
  background: url(../../assets/user/bottom1.png) no-repeat 0.1rem 0;
}
.w-xfoot ul li:nth-child(2) i{
  background: url(../../assets/user/bottom2.png) no-repeat -5.5rem 0;
}
.w-xfoot ul li:nth-child(3) em{
  margin-top: 1.5rem;
  display: inline-block;
  height: 5.5rem;
  width: 11.3rem;
  background: url(../../assets/user/bottom3.png) no-repeat 0 0;
}
.w-xfoot ul li:nth-child(4) i{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat -5.4rem 0;
}
.w-xfoot ul li:nth-child(5) i{
  background: url(../../assets/user/bottom5.png) no-repeat -5.8rem 0;
}
/* 底部 */
</style>